<template>
<!--userinfo.wxml-->
<view class="container">
    <view class="user-container">
      <view class="card_box">
        <view class="user-head" @tap="changeAvatar">
            <view class="user-txt">头像</view>
            <image class="user_headimg" :src="user.head_pic?user.head_pic:defaultAvatar"></image>
        </view>
        <view class="user-name" data-type="nickname" @tap="editUserInfo">
            <view class="user-name-txt">用户名</view>
            <image class="arrow-right" src="/static/images/icon-arrowdown.png"></image>
            <view class="user-txt-right one-line">{{user.nickname?user.nickname:user.user_id?user.user_id + '用户' : '未登录'}}</view>
        </view>
        <view class="user-name" data-type="sex" @tap="editUserInfo">
            <view class="user-name-txt">性别</view>
            <image class="arrow-right" src="/static/images/icon-arrowdown.png"></image>
            <view class="user-txt-right">{{user.sex?(user.sex==1?'男':'女'):'保密'}}</view>
        </view>
        <view class="user-name" data-type="mobile" @tap="editUserInfo">
            <view class="user-name-txt">手机</view>
            <image class="arrow-right" src="/static/images/icon-arrowdown.png"></image>
            <view class="user-txt-right">{{user.mobile}}</view>
        </view>
        <view class="user-name" data-type="email" @tap="editUserInfo">
            <view class="user-name-txt">邮箱</view>
            <image class="arrow-right" src="/static/images/icon-arrowdown.png"></image>
            <view class="user-txt-right one-line">{{user.email}}</view>
        </view>
      </view>
      <view class="card_box">  
        <view class="user-name" data-type="paypwd" @tap="editUserInfo">
            <view class="user-name-txt">支付密码设置</view>
            <image class="arrow-right" src="/static/images/icon-arrowdown.png"></image>
        </view>
        <navigator class="user-name" url="/pages/user/address_list/address_list">
            <view class="user-name-txt">收货地址设置</view>
            <image class="arrow-right" src="/static/images/icon-arrowdown.png"></image>
        </navigator>
      </view>  
    </view>
</view>
</template>

<script>
var app = getApp();
var setting = app.globalData.setting;
var request = app.globalData.request;
var common = require("../../../utils/common.js");

export default {
  data() {
    return {
      url: setting.url,
      resourceUrl: setting.resourceUrl,
      defaultAvatar: setting.resourceUrl + "/static/static/images/user68.jpg",
      user: null
    };
  },

  components: {},
  props: {},
  onShow: function () {
    var that = this;
    app.globalData.getUserInfo(function (userInfo) {
      that.setData({
        user: userInfo
      });
    }, true);
  },
  methods: {
    editUserInfo: function (e) {
      var type = e.currentTarget.dataset.type;

      if ((type == 'password' || type == 'paypwd') && !this.user.mobile) {
        return app.globalData.showTextWarining('请先绑定手机号码');
      }

      if (type && this.user) {
        uni.navigateTo({
          url: `/pages/user/userinfo_edit/userinfo_edit?type=${type}`
        });
      }
    },
    changeAvatar: function () {
      var that = this;
      uni.chooseImage({
        count: 1,
        //最多1张图片,默认9
        sizeType: ['compressed', 'original'],
        // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['camera', 'album'],
        // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          request.uploadFile(that.url + '/api/user/upload_headpic', {
            filePath: res.tempFilePaths[0],
            name: 'head_pic',
            success: function (res) {
              var headPic = common.getFullUrl(res.data.result);
              that.setData({
                ['user.head_pic']: headPic
              });
              app.globalData.userInfo.head_pic = headPic;
              app.globalData.showSuccess("设置头像成功");
            }
          });
        }
      });
    }
  }
};
</script>
<style>
/* userinfo.wxss */
.user-container{
    font-size: 30rpx;
}
.user-head{
    width: 100%;
    height: 200rpx;
    position: relative;
    background-color: white;
}
.user-txt{
    float: left;
    margin-left: 40rpx;
    margin-top: 80rpx;
}
.user_headimg{
    height: 140rpx;
    width:140rpx;
    border-radius: 70rpx;
    float: right;
    margin-right: 30rpx;
    margin-top: 25rpx;
}
.user-name{
    width: 100%;
    height: 100rpx;
    margin-top: 2rpx;
    background-color: white;
}
.user-name-txt{
    float: left;
    margin-left:40rpx;
    margin-top: 30rpx;
}
.user-txt-right{
    float: right;
    margin-top: 30rpx;
    margin-right: 30rpx;
}
.user-change{
    width: 100%;
    height: 100rpx;
    background-color: white;
}
.one-line{
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
}
.arrow-right{
    width: 30rpx;
    height: 30rpx;
    margin-right: 30rpx;
    float: right;
    margin-top: 30rpx;
}
.card_box{
  width: 710rpx;
  border-radius: 10rpx;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 20rpx;
}
</style>